import 'package:animal/constant/color.dart';
import 'package:animal/constant/font.dart';
import 'package:animal/item/buttom_item.dart';
import 'package:animal/item/shop_list_item.dart';
import 'package:animal/ui/goods/Controller/shop_small_controller.dart';
import 'package:animal/utils/screen_util.dart';
import 'package:animal/widgets/image_error.dart';
import 'package:animal/widgets/image_loading.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_plus/flutter_swiper_plus.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';

///商城
class ShopMallPage extends StatelessWidget {
  ShopMallPage({Key? key}) : super(key: key);
  late ShopSmallController controller;

  final List<String> imageList = [
    "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg",
    "https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg",
    "https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg",
    "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg",
    "https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg"
  ];

  @override
  Widget build(BuildContext context) {
    controller = Get.put(ShopSmallController());
    return Scaffold(
        backgroundColor: KColorConstant.white,
        body: NestedScrollView(
            controller: controller.nestedScrollController,
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverOverlapAbsorber(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                  sliver: Obx(() => _buildSliverAppBar()),
                )
              ];
            },
            body: SingleChildScrollView(
              child: Container(
                margin: EdgeInsets.only(top: ScreenUtil.statusBarHeight + ScreenUtil().L(60)),
                child: Column(
                  children: [
                    Container(
                      padding: EdgeInsets.symmetric(vertical: ScreenUtil().L(20), horizontal: ScreenUtil().L(30)),
                      decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(ScreenUtil().L(10))),
                      child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
                        ButtonItem.iconTextButton(
                            child: GFIconButton(onPressed: () {}, shape: GFIconButtonShape.circle, icon: const Icon(Icons.group_add)),
                            text: "美妆",
                            textSize: 15),
                        ButtonItem.iconTextButton(
                            child: GFIconButton(onPressed: () {}, shape: GFIconButtonShape.circle, icon: const Icon(Icons.group_add)),
                            text: "母婴",
                            textSize: 15),
                        ButtonItem.iconTextButton(
                            child: GFIconButton(onPressed: () {}, shape: GFIconButtonShape.circle, icon: const Icon(Icons.group_add)),
                            text: "生活",
                            textSize: 15),
                        ButtonItem.iconTextButton(
                            child: GFIconButton(onPressed: () {}, shape: GFIconButtonShape.circle, icon: const Icon(Icons.group_add)),
                            text: "食品",
                            textSize: 15),
                        ButtonItem.iconTextButton(
                            child: GFIconButton(onPressed: () {}, shape: GFIconButtonShape.circle, icon: const Icon(Icons.group_add)),
                            text: "创新",
                            textSize: 15),
                      ]),
                    ),
                    Text("为你推荐", style: KFontConstant.myTextStyle(size: 17, color: KColorConstant.black222, bold: true)),
                    Container(
                      margin: EdgeInsets.symmetric(vertical: ScreenUtil().L(15), horizontal: ScreenUtil().L(30)),
                      padding: EdgeInsets.only(top: ScreenUtil().L(5)),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(ScreenUtil().L(5)),
                        boxShadow: [
                          BoxShadow(
                            color: const Color(0x19000000),
                            blurRadius: ScreenUtil().L(5),
                            spreadRadius: ScreenUtil().L(7),
                            offset: const Offset(0, 0.5),
                          ),
                        ],
                      ),
                      child: ListView.builder(
                          padding: const EdgeInsets.all(0),
                          itemCount: 10,
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          itemBuilder: (context, index) {
                            return ShopListItem(
                              borderSize: index==10-1?0:null,
                              iconButton: GFIconButton(
                                icon: const Icon(
                                  Icons.shopping_cart_outlined,
                                  color: Color(0XFFFF5B5D),
                                ),
                                onPressed: () {},
                                type: GFButtonType.transparent,
                              ),
                              onTap: () => controller.gotoShopInfo(),
                            );
                          }),
                    )
                  ],
                ),
              ),
            )));
  }

  ///上部分AppBar内容
  Widget _buildSliverAppBar() {
    return SliverAppBar(
      expandedHeight: ScreenUtil().L(200),
      pinned: true,
      backgroundColor: controller.appBarColor.value,
      automaticallyImplyLeading: true,
      title: InkWell(
        onTap: () => controller.gotoShopSearch(),
        child: Container(
            padding: EdgeInsets.symmetric(horizontal: ScreenUtil().L(20)),
            margin: EdgeInsets.symmetric(horizontal: ScreenUtil().L(40)),
            height: ScreenUtil().L(35),
            width: double.infinity,
            alignment: Alignment.center,
            decoration: BoxDecoration(color: const Color(0XFFF6F6F6), borderRadius: BorderRadius.circular(ScreenUtil().L(40))),
            child: Row(
              children: [
                Image.asset("icons/icon_search.png", width: ScreenUtil().L(18)),
                Container(width: ScreenUtil().L(5)),
                Text(
                  "搜宠物",
                  style: KFontConstant.myTextStyle(size: 16, color: const Color(0XFFBFC4CC)),
                )
              ],
            )),
      ),
      flexibleSpace: FlexibleSpaceBar(
        background: Stack(
          alignment: Alignment.topCenter,
          children: [
            Container(
              width: double.infinity,
              height: ScreenUtil().L(180),
              decoration: const BoxDecoration(
                color: Color(0XFFFFC3B3),
              ),
            ),
            Column(
              children: [
                Container(
                  height: ScreenUtil().L(80),
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.symmetric(horizontal: ScreenUtil().L(15)),
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(ScreenUtil().l(20))),
                      child: Swiper(
                        loop: true,
                        autoplay: true,
                        itemHeight: ScreenUtil().L(150),
                        itemBuilder: (BuildContext context, int index) {
                          return CachedNetworkImage(
                            imageUrl: imageList[index],
                            placeholder: (context, url) => const ImageLoadingWidget(),
                            errorWidget: (controller, url, err) => ImageErrorWidget(),
                            fit: BoxFit.cover,
                            width: double.infinity,
                            height: double.infinity,
                          );
                        },
                        itemCount: imageList.length,
                        pagination: const SwiperPagination(),
                        control: const SwiperControl(size: 0),
                      ),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
      elevation: 1,
    );
  }
}
